<template>
	<!-- 续租确认页面 -->
	<view class="content">
		<view class="main">
			<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
			<view class="id_top">
				<view class="id_top_title">
					续租商品
				</view>
				<view class="id_top_curd">
					<view class="curd_left">
						<image style="width: 100%;height: 100%;" src="/static/我 的.png" mode=""></image>
					</view>
					<view class="curd_right">
						<p style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 30rpx;margin-top: 15rpx;margin-left: 10rpx; ">首月1元 99新 ipone 16pro Max阿斯顿发顺丰</p>
						<p class="psd">套餐 ：512GB 原色钛金属色 碎租随还12222222222</p>
						<p class="psd">租期 ：2025.03.21-2026.03.20</p>
						<p class="psd">数量 ：1</p>
					</view>
				</view>
				
			</view>
			<view class="id_times">
				<view class="id_top_titles">
				续租时间
				</view>
				<view class="id_top_tl">
					<image src="/static/感叹号 (1).png" mode="" style="width: 30rpx; height: 30rpx;margin-top: 10rpx;"></image>
					<p style="line-height: 50rpx;margin-left: 10rpx;"> 续租需要一次性扣款，不支持分期</p>
				</view>
				<view class="id_lists" @click="show = true">
					<view class="lists_zuo">
					续租日期
					</view>
					<view class="lists_you">
					{{Initialtime}} >
					</view>
				</view>
				<view class="id_lists" @click="show2 = true">
					<view class="lists_zuo">
					结束时间
					</view>
					<view class="lists_you">
					{{listtime}} >
					</view>
				</view>
			</view>
			<view class="xz_btm">
				<view class="id_lists">
					<view class="lists_zuo">
					续租
					</view>
					<view class="lists_you">
					共30天
					</view>
				</view>
			</view>
			<view class="postion_btm">
				<view class="postion">
					<view class="postion_left">
						总计： <span style="color: red;font-size: 33rpx;">￥ <span style="font-size: 40rpx;">642</span>  .00</span> 
					</view>
					<view class="postion_right">
						<u-button text="确认续租" style="background-color:#FCD948;border-radius: 40rpx;border: none;margin-top: 15rpx;"></u-button>
					</view>
				</view>
			</view>
			<u-datetime-picker
			                :show="show"
			                v-model="value1"
			                mode="date"
							@confirm="onyes"
			        ></u-datetime-picker>
					<u-datetime-picker
					                :show="show2"
					                v-model="value1"
					                mode="date"
									@confirm="onguans"
					        ></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import navgatsVue from '../../../common/navgats/navgats.vue';
	import moment from 'moment';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "续租确认页面",
					bgColor: "#ffffff"
				},
				show: false,
				show2:false,
				value1: Number(new Date()),
				listtime:"",
				Initialtime:"",
				
			}
		},
		components:{
			navgatsVue
		},
		onShow() {
			this.times()
		},
		methods: {
			times(){
				// this.ontime(this.value1)
				this.Initialtime=moment(this.value1).format('YYYY-MM-DD')
				this.listtime=moment(this.value1).format('YYYY-MM-DD')
			},
			onyes(value){
				console.log(value.value)
				this.ontime(value.value)
				this.show=false
			},
			onguans(value){
				console.log(value.value)
				this.listtime=moment(value.value).format('YYYY-MM-DD')
				this.show2=false
			},
			ontime(timestamp){
				// const date = this.timestampToTime(timestamp)
				// console.log(date)
				 this.Initialtime=moment(timestamp).format('YYYY-MM-DD')
				console.log(this.Initialtime)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
			font-size: 3vw;
	}
.content{
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		overflow-y: auto;
	}
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.id_top{
		width: 90%;
		height: 330rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		margin-top: 20rpx;
	}
	.id_top_title{
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		font-size: 35rpx;
		line-height: 100rpx;
	}
	.id_top_titles{
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		font-size: 35rpx;
		line-height: 100rpx;
	}
	.id_top_curd{
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		background-color: #F6F6F6;
		display: flex;
		overflow: hidden;
	}
	.curd_left{
		width: 35%;
		height: 100%;
	}
	.curd_right{
		width: 65%;
		height: 100%;
	}
	.psd{
		width: 100%;
		font-size: 23rpx;
		color: #ccc;
		line-height: 45rpx;
		margin-left: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.id_times{
		width: 90%;
		height: 315rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.id_top_tl{
		width: 90%;
		height: 50rpx;
		margin: 0 auto;
		display: flex;
		color: #ccc;
	}
	.id_lists{
		width: 90%;
		height: 90rpx;
		margin: 0 auto;
		display: flex;
	}
	.lists_zuo{
		width: 50%;
		height: 100%;
		font-size: 30rpx;
		line-height: 90rpx;
	}
	.lists_you{
		width: 50%;
		height: 100%;
		font-size: 30rpx;
		line-height: 90rpx;
		text-align: right;
		color: #434C4C;
	}
	.xz_btm{
		width: 90%;
		height: 100rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.postion_btm{
		width: 100%;
		height: 100rpx;
		position: absolute;
		background-color: #ffffff;
		bottom: 0;
	}
	.postion{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		// background-color: aqua;
		display: flex;
	}
	.postion_left{
		width: 50%;
		height: 100%;
		font-size: 33rpx;
		line-height: 95rpx;
	}
	.postion_right{
		width: 50%;
		height: 100%;
	}
</style>
